//初始化
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 微软雅黑;
}

a {
    text-decoration: none;
    display: block;
    color: #000;
}

ul {
    list-style: none;
}

div {
    // border: solid 1px;
}

//自适应设置
@function vw($px:1) {
    @return $px / 375 * 100vw;
}
@function vh($px:1) {
    @return $px / 667 * 100vh;
}
//容器样式
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;

    .grid {
        flex: auto 1 auto;
        display: flex;
        background-color: #fff;
    }

    //head部分样式
    .head {
        width: 100%;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        flex-basis: vw(30);
        padding: vw(0) vw(10) vw(7);

        .esc,
        .share {
            flex-basis: vw(30);
            transform: rotate(180deg);
        }

        .head-text {
            flex: 1 1 auto;
            line-height: vw(30);
            text-align: center;
            font-size: vw(17);
        }
    }

    //搜索框部分
    .search {
        margin: vw(13) vw(15);
        width: vw(345);
        height: vw(34);
        border-radius: vw(17);
        overflow: hidden;

        input {
            background-color: #f3f4f6;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            border-radius: vw(17);

            &::placeholder {
                text-align: center;
                font-size: vw(12);
                color: #999;
            }
        }
    }

    //风景
    .visit {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: vw(345);
        height: vw(264);
        background: #FFFFFF;
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.10);
        border-radius: vw(4);
        margin-bottom: vw(15);
        >a{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        img {
            display: block;
            width: vw(315);
            height: vw(168);
            margin: vw(15);
            margin-bottom: 0;
        }

        .word {
            margin-top: vw(13);
            margin-bottom: vw(18);
            width: vw(315);

            .name {
                display: flex;
                justify-content: space-between;

                strong {
                    font-size: vw(18);
                    color: #333;
                }

                span {
                    font-size: vw(18);
                    color: #e52717;

                    i {
                        font-style: normal;
                        font-size: vw(12);
                        color: #151515;
                    }
                }
            }

            .addr {
                display: flex;
                .icon-d{
                    width: vw(16);
                    height: vw(16);
                    background: url(../imgs/地址555@2x.png) no-repeat;
                    background-size: 16px;
                }
                .local{
                    font-size: vw(14);
                    color: #BBBBBB;
                    letter-spacing: 0;
                }
            }
        }
    }
}